<template>
    <div id="add-model">
        <el-dialog
            title="添加算法模型设备绑定关系"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="40%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
            <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="80px" :rules="rules">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="算法" prop="n_AlgorithmId">
                            <el-select 
                                v-model="ruleForm.n_AlgorithmId" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in algorithmDropdownList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="模型" prop="n_ModelId">
                            <el-select 
                                v-model="ruleForm.n_ModelId" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in modelDropdownList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="安全帽" prop="n_DeviceId">
                            <el-select 
                                v-model="ruleForm.n_DeviceId" 
                                filterable 
                                class="m-2" 
                                value-key="id"
                                placeholder="" 
                            >
                                <el-option
                                    v-for="item in safetyHatDropdownList"
                                    :key="item.mainId"
                                    :label="item.name"
                                    :value="item.mainId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" :disabled="repeatDis" @click="submitForm(ruleFormRef)">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, toRaw, onMounted } from 'vue'
import { FormInstance, FormRules, ElButton, ElCol, ElDialog, ElForm, ElFormItem, ElInput, ElRow } from 'element-plus'
import { SafetyHatDropDownList } from '/@/api/its/its'
import { DropDownList as AlgorithmDropDownList } from '/@/api/its/algorithm'
import { DropDownList as ModelDropDownList } from '/@/api/its/model'
import { Add } from '/@/api/its/algorithm-model-device-bind'
import { RuleFormType } from '../types/algorithmModelDeviceBindType'
import { FormType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'add-algorithm-model-device-bind',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
    },
    setup(props,ctx){
        const ruleFormRef = ref()

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive <FormType<RuleFormType>> ({
            repeatDis: false,
            ruleForm: {} as RuleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive <FormRules> ({
            /*** 放置验证 */
            // 算法ID
            n_AlgorithmId: [
				{ required: true, message: '请选择算法', trigger: 'change' },
			],
            // 模型ID
            n_ModelId: [
                { required: true, message: '请选择模型', trigger: 'change' },
			],
            // 设备ID
            n_DeviceId: [
                { required: true, message: '请选择设备', trigger: 'change' },
			],
        })

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ruleFormRef.value.resetFields()
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        /*** submitForm 提交事件 */
        const submitForm = (formEl: FormInstance | undefined) => {
            if(!formEl) return
            formEl.validate( async (valid) => { 
                if(valid){
                    state.repeatDis = true
                    let param = toRaw(state.ruleForm)
                    let res: any = null
                    try {
                        res = await Add(param)
                    }finally {
                        state.repeatDis = false
                    }
                    
                    if(res.success){
                        ctx.emit('close','success')
                        ctx.emit('updateData')
                    }
                }else{
                    console.log('error submit!')
                }
            })
        }

        //算法下拉列表
        const algorithmDropdownList: any = ref([])
        const getAlgorithmDropDownList = async () => {
            try {
                let res = await AlgorithmDropDownList()
                if (res && res.data) {
                    algorithmDropdownList.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }
        }

        //模型下拉列表
        const modelDropdownList: any = ref([])
        const getModelDropDownList = async () => {
            try {
                let res = await ModelDropDownList()
                if (res && res.data) {
                    modelDropdownList.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }
        }

        //安全帽下拉列表
        const safetyHatDropdownList: any = ref([])
        const getSafetyHatDropdownList = async () => {
            try {
                let res = await SafetyHatDropDownList()
                if (res && res.data) {
                    safetyHatDropdownList.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }
        }

        onMounted(async () => {
            await getAlgorithmDropDownList()
            await getModelDropDownList()
            await getSafetyHatDropdownList()
        })

        return {
            handleClose,
            submitForm,
            ruleFormRef,
            ...toRefs(state),
            rules,
            algorithmDropdownList,
            modelDropdownList,
            safetyHatDropdownList
        }
    },
} )
</script>
<style scoped lang="scss">
#add-model{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>